<template>
  <el-dialog title="服务单详情" :visible.sync="open" width="800px" append-to-body @before-close="beforeClose">
    <div class="trend-detail" v-loading="loading">
      <el-row class="trend-block" :gutter="20">
        <el-col :span="8" style="margin-bottom: 20px;">{{ $t("service_order_number") }}：{{ detailData.serviceOrderCode|| "-" }}</el-col>
        <el-col :span="16" style="margin-bottom: 20px;">{{ $t("Service_order_title") }}：{{ detailData.serviceOrderTitle|| "-" }}</el-col>
        <el-col :span="8" style="margin-bottom: 20px;">{{ $t("select_the_service_order_type") }}：{{ detailData.serviceOrderName || "-" }}</el-col>
        <el-col :span="16" style="margin-bottom: 20px;">{{ $t("service_order_code") }}：{{ detailData.serviceOrderCode || "-" }}</el-col>
        <el-col :span="24" style="margin-bottom: 20px;">{{ $t("service_order_type_remarks") }}：{{ detailData.serviceOrderRemark || "-" }}</el-col>
        <el-col :span="8" style="margin-bottom: 20px;">{{ $t("creation_time") }}：{{ detailData.createTime|| "-" }}</el-col>
        <el-col :span="16" style="margin-bottom: 20px;">{{ $t("submitted_by") }}：{{ detailData.createBy|| "-" }}</el-col>
        <el-col :span="8">{{ $t("contact_person") }}：{{
          detailData.dockingPersonName || '-'        }}</el-col>
        <el-col :span="16" style="display: flex;">
          <span>{{ $t("status") }}：</span><dict-tag :options="dict.type.service_list_status" :value="detailData.status" />
        </el-col>
        <el-col :span="24" class="trend-content" @click.native="reset">{{ $t("remarks") }}：
        <span v-html="detailData.remark " v-if="detailData.remark"></span>
        <span v-else>-</span>
        </el-col>
        <el-col :span="24" class="trend-content" @click.native="reset">
          <div style="display: flex; align-items: center" v-if="detailData.annex">
            <div>{{ $t("annex") }}：</div>
            <div v-for="(url, i) of detailData.annex.split(',')" :key="i" @click="downloadByUrl(url)">
              <el-link :underline="false">{{
                url.split("/")[url.split("/").length - 1]
              }}</el-link>
            </div>
          </div>
        </el-col>
      </el-row>
      <chat :detailData="detailData" :commentInfo="commentInfo" @handleReply="handleReply"></chat>
    </div>
    <div slot="footer" class="dialog-footer" v-if="detailData.status != 2">
      <template v-if="detailData.status != 2">
        <div style="margin-bottom: 20px; width: 100%; text-align: left">
          <!-- <el-input type="textarea" :rows="4" :placeholder="replyPlaceholder" v-model="replyForm.content"
            style="margin-bottom: 10px">
          </el-input> -->
          <editor v-model="replyForm.content"  :placeholder="$t('please_enter', { name: $t('reply') })" :min-height="192"/>
          <file-upload v-model="replyForm.picture" />
        </div>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t("reply")
        }}</el-button>
      </template>
      <el-button v-if="replyForm.status == 1" type="success" @click="handleReceive">{{ $t("recieve") }}</el-button>
      <el-button type="primary" plain @click="handleComplete">{{
        $t("complete")
      }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  getDetail,
  exchangeState,
  systemdetails,
  getList,
  completeServiceList,
} from "@/api/custom/serviceUnitList";
import chat from "./chat";
export default {
  dicts: ["service_list_status"],
  props: {},
  components: {
    chat,
  },

  data() {
    return {
      loading: false,
      open: false,
      tableList: [],
      detailData: {},
      commentInfo: [],
      replyPlaceholder: this.$t("please_enter"),
      replyForm: {
        pid: 0,
        content: null,
        picture: null,
      },
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },
  created() { },

  methods: {
    downloadByUrl(url) {
      window.open(this.baseUrl + url);
    },
    //服务单详情
    getgetList() {
      this.loading = true;
      getList(this.detailData.id).then((res) => {
        if (res.code == 200) {
          this.commentInfo = res.data.dtoList;
        }
        this.loading = false;
      });
    },
    showModal(row) {
      this.open = true;
      this.detailData = row;
      this.reset();
      // this.getData();
      this.getgetList();
    },
    // getData() {
    //   this.loading = true
    //   getDetail({
    //     uuitId: this.detailData.id,
    //   }).then((res) => {
    //     this.loading = false
    //     this.commentInfo = res.data;
    //   });
    // },
    reset() {
      this.replyPlaceholder = this.$t("please_enter");
      this.replyForm = {
        pid: 0,
        content: null,
        picture: null,
        uuitId: this.detailData.id,
      };
    },
    handleReply(item) {
      this.replyPlaceholder = `${this.$t("reply")} ${item.replierName}`;
      this.replyForm.pid = item.id;
      // this.handleSubmitForm()
    },
    handleSubmitForm() {
      systemdetails({
        serviceListId: this.detailData.id,
        pid: this.replyForm.pid || 0,
        replyFile: this.replyForm.picture,
        content: this.replyForm.content,
      }).then((res) => {
        this.$modal.msgSuccess(this.$t("operation_successful"));
        this.getgetList();
        this.reset();
      });
    },
    handleReceive() {
      exchangeState(this.detailData.id).then(() => {
        this.$modal.msgSuccess(this.$t("operation_successful"));
        this.open = false;
        this.$emit("refrshList");
      });
    },
    handleComplete() {
      completeServiceList(this.detailData.id).then(() => {
        this.$modal.msgSuccess(this.$t("operation_successful"));
        this.open = false;
        this.$emit("refrshList");
      });
    },
    beforeClose() {
      this.reset();
      this.detailData = {};
      this.commentInfo = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.trend-detail {
  height: 60vh;
  overflow: hidden;
  overflow-y: auto;

  .trend-block {
    padding-bottom: 20px;
    border-bottom: 1px dashed #efefef;

    .trend-content {
      font-size: 16px;
      color: #333;
      margin-top: 20px;
      cursor: pointer;
    }
  }

  .comment-info {
    .comment-content {
      margin: 0 20px;
      padding: 20px 0;
      border-bottom: 1px dashed #efefef;

      .comment-item {
        margin-top: 15px;

        .item-time {
          color: #999999;
          margin-bottom: 10px;
        }

        .item-nick {
          color: #008000;
        }

        .reply-tag {
          color: #999999;
          margin: 0 2px;
        }

        .item-content {
          display: flex;

          .item-content-text {
            flex: 1;
            font-size: 14px;
            color: #333333;
            word-break: break-all;
            line-height: 20px;

            .reply-btn {
              margin-left: 16px;
            }
          }
        }

        &-child {
          margin-left: 40px;
        }
      }
    }
  }
}

.text-cut {
  display: -webkit-box;
  word-break: break-all;
  white-space: normal;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-cut1 {
  -webkit-line-clamp: 1;
}
</style>
